<template>
	<scroll-view class="detail-content">

		<view class="top-content">
			<view v-if="orderInfo.orderProgress==2" class="status-ing">
				<view class="bal-label">
					<view>余额</view>
					<view class="time">{{getDate()}}</view>
				</view>
				<view class="bal-text">
					<view>{{orderInfo.balance}}</view>
					<view style="font-size: 24upx;margin-left: 10upx;">（预付款{{orderInfo.balance}}）</view>
				</view>
				<view class="review-info">
					<text>订单编号：{{orderInfo.orderCode}}</text>
					<view class="review" @click="reviewDetail">
						<image src="../../static/ic_review.png" />
						<text>续费记录</text>
					</view>
				</view>
			</view>
			<view v-else class="status-line">
				<view class="status">
					<view>当前状态</view>
					<view class="time">{{getDate()}}</view>
				</view>

				<view class="status-text">{{getStatus(orderInfo.orderProgress)}}</view>
			</view>
			<view class="progress">
				<view class="icon-list">
					<view class="image-item">
						<view class="image-circle">
							<image src="../../static/ic_right.png" />
						</view>
					</view>
					<view class="line" />
					<view class="image-item">
						<view class="image-circle">
							<image :src="orderInfo.orderProgress<2?'../../static/ic_right_p.png':'../../static/ic_right.png'" />
						</view>
					</view>
					<view class="line" />
					<view class="image-item">
						<view class="image-circle">
							<image :src="orderInfo.orderProgress<3?'../../static/ic_right_p.png':'../../static/ic_right.png'" />
						</view>
					</view>
				</view>
				<view class="status-list">
					<text>待处理</text>
					<view class="line" :style="orderInfo.orderProgress<2?'background-color: #E9E9E9':'background-color: #333333'" />
					<text :style="orderInfo.orderProgress<2?'color: #999999;':'color: #333333'">进行中</text>
					<view class="line" :style="orderInfo.orderProgress<3?'background-color: #E9E9E9':'background-color: #333333'" />
					<text :style="orderInfo.orderProgress<3?'color: #999999;':'color:#333333'">已完成</text>
				</view>

			</view>
		</view>
		<view class="order-content">
			<view class="label">
				<image src="../../static/ic_info.png" />
				<view>订单信息</view>
			</view>
			<view class="content">
				<view class="item">
					<view style="width: 200upx;">下单编号</view>
					<view>{{orderInfo.orderCode}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">联系方式</view>
					<view>{{orderInfo.currentNursePhone==null?"暂无":orderInfo.currentNursePhone}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">病区</view>
					<view>{{orderInfo.deptName}} {{orderInfo.areaName}} {{orderInfo.badNum}}</view>
				</view>
			</view>
			<view class="content" v-show="isShowDetail">
				<view class="item">
					<view style="width: 200upx;">订单编号</view>
					<view>{{orderInfo.orderCode}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">姓名</view>
					<view>{{orderInfo.patientName}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">性别</view>
					<view>{{orderInfo.gender==2?"女":"男"}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">年龄</view>
					<view>{{orderInfo.age}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">床号</view>
					<view>{{orderInfo.badNum}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">联系方式</view>
					<view>{{orderInfo.patientPhone}}</view>
				</view>
				<view class="item">
					<view style="width: 200upx;">备注</view>
					<view>{{orderInfo.remark}}</view>
				</view>
			</view>
			<view class="more" @click="showDetai">{{isShowDetail?"收起":"显示更多"}} </view>
			<view v-if="orderInfo.orderProgress==2" class="review-line">
				<view>续费</view>
				<input type="number" v-model="money" placeholder="续费金额" />
			</view>
			<view class="btn-content">
				<button class="btn" @click="btnClick" v-show="orderInfo.orderProgress!=3">{{orderInfo.orderProgress==1?'撤销订单':'续费'}}</button>
			</view>
		</view>
		</view>
	</scroll-view>

</template>

<script>
	import ewcode from "../../components/ewcode.vue"
	import util from "../../util/textUtil.js"
	export default {
		data() {
			return {
				isShowDetail: false,
				orderInfo: {},
				money: "",
				imageurl: "",
				ewVisible: false,

			}
		},
		components: {
			ewcode
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "订单详情"
			});
			let orderId = options.orderId;
			uni.request({
				url: getApp().globalData.baseUrl + 'order/sorder/info/' + orderId,
				method: 'GET',
				header: {
					"token": getApp().globalData.token
				},
				success: res => {
					console.log(res);
					this.orderInfo = res.data.data;
				},
				fail: () => {},
			});
			this.getCode();
		},
		methods: {
			showDetai: function() {
				let isShowDetail = this.isShowDetail;
				this.isShowDetail = !isShowDetail;
			},
			getStatus: function(orderProgress) {
				if (orderProgress == 1) {
					return "待处理"
				} else if (orderProgress == 2) {
					return "进行中"
				} else if (orderProgress == 3) {
					return "已完成"
				}
			},
			//续费记录
			reviewDetail: function() {
				let orderId = this.orderInfo.orderId;
				uni.navigateTo({
					url: "review?orderId=" + orderId
				});
			},
			btnClick: function() {
				let orderId = this.orderInfo.orderId;
				if (this.orderInfo.orderProgress == 1) {
					uni.request({
						url: getApp().globalData.baseUrl + 'order/order/cancel/' + orderId + '?cancelReason=取消了',
						method: 'GET',
						header: {
							"token": getApp().globalData.token
						},
						success: res => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '撤销成功！',
									icon: 'none'
								});
								uni.navigateBack({
									delta: 1
								});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});

							}
							console.log(res);
						},
						fail: () => {},
					});
				} else if (this.orderInfo.orderProgress == 2) {
					let that = this;
					let momey = this.money == null ? 0 : this.money;
					if(momey==0){
						uni.showToast({
							title:"请输入续费金额",
							icon:"none"
						});
						return;
					}
					uni.request({
						url: getApp().globalData.baseUrl + 'order/order/pay/renew',
						method: 'POST',
						data: {
							"orderId": orderId,
							"amount": parseFloat(momey),
							"payWay": "ONLINE", // 字典 payWay
							"billService": 1, // 是否开票服务  字典type : billService
							"payer": "微信" // 付款人
						},
						header: {
							"token": getApp().globalData.token
						},
						success: res => {
							console.log(res);
							if (res.data.code == 0) {
							   let tradeId =  res.data.data.tradeId;
						    	uni.navigateTo({
								url: "../pay/wx?tradeId=" + tradeId+"&price="+momey
							});
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
							console.log(res);
						},
						fail: () => {},
					});
				}
			},
			repay: function(tradeId) {
//			
// 				let code = util.getUrlParam("code");
// 				uni.request({
// 					url: getApp().globalData.baseUrl + 'order/tranrecord/allinPay',
// 					method: 'POST',
// 					data: {
// 						"tradeId": tradeId, // tradeId
// 						"type": 4 // 支付标识 3 微信  4支付宝
// 					},
// 					header: {
// 						"token": getApp().globalData.token
// 					},
// 					success: res => {
// 						console.log(res);
// 						if (res.data.code == 0) {
// 							let payInfo = {
// 								"appId": "wxa52403bb7226214b",
// 								"nonceStr": res.data.nonceStr,
// 								"package": res.data.package,
// 								"sign": res.data.paySign,
// 								"signType": "MD5",
// 								"timeStamp": res.data.timeStamp,
// 							}
// 							this.$wxPay(payInfo, function(res) {
// 								/*成功的回调*/
// 								console.log("支付成功");
// 								uni.showToast({
// 									title: "支付成功",
// 									icon: "none"
// 								})
// 							}, function(e) {
// 								/**失败的回调*/
// 								console.log("支付失败或取消支付")
// 								uni.showToast({
// 									title: "支付失败或取消支付",
// 									icon: "none"
// 								})
// 							})
// 						} else {
// 							uni.showToast({
// 								title: res.data.msg,
// 								icon: 'none'
// 							});
// 
// 						}
// 						console.log(res);
// 
// 					},
// 					fail: () => {},
// 
// 				});
			},
			getDate: function() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				hour = hour > 9 ? hour : '0' + hour;
				minute = minute > 9 ? minute : '0' + minute;
				second = second > 9 ? second : '0' + second;
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
		}
	}
</script>

<style>
	.detail-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		align-items: center;
		background-color: #f1f1f1;
	}

	.top-content {
		height: 300upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
	}

	.status-ing {
		display: flex;
		flex-direction: column;
		height: 220upx;
		padding: 0 30upx;
		background-color: #bc8aa7;
		color: #FFFFFF;
	}

	.status-ing .bal-label {
		padding-top: 20upx;
		color: #FFFFFF;
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		width: 100%;

	}

	.status-ing .bal-label .time {
		flex: 1;
		text-align: right;
	}

	.status-ing .bal-text {
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		font-size: 32upx;
	}


	.status-ing .review-info {
		margin-top: 20upx;
		display: flex;
		flex-direction: row;
		font-size: 24upx;
		color: #FFFFFF;
		align-items: center;


	}

	.status-ing .review-info .review {
		display: flex;
		flex-direction: row;
		font-size: 28upx;
		align-items: center;
		flex: 1;
		justify-content: flex-end
	}


	.status-ing .review-info image {
		height: 40upx;
		width: 40upx;
		margin-right: 10upx;
	}

	.top-content .status-line {
		height: 220upx;
		padding: 0 30upx;
		background-color: #bc8aa7;
	}

	.status-line .status {
		padding-top: 20upx;
		color: #FFFFFF;
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.status-line .status .time {
		flex: 1;
		text-align: right;

	}

	.status-line .status-text {
		font-size: 36upx;
		color: #FFFFFF;
		margin-top: 20upx;
	}

	.progress {
		display: flex;
		flex-direction: column;
		width: 100%;
		position: absolute;
		z-index: 1000;
		left: 0;
		top: 200upx;
	}

	.icon-list {
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;

	}

	.icon-list .line {
		width: 100upx;
		height: 0upx;
	}

	.icon-list .image-item {
		flex: 1;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.icon-list .image-circle {
		height: 40upx;
		width: 40upx;
		border-radius: 40upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-list .image-circle image {
		height: 30upx;
		width: 30upx;
	}


	.status-list {
		align-items: center;
		justify-content: center;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.status-list .line {
		width: 100upx;
		height: 5upx;
		background-color: #E9E9E9;
	}

	.status-list text {
		font-size: 32upx;
		flex: 1;
		color: #333333;
	}

	.order-content {
		margin-top: 30upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.order-content .label {
		padding: 0 40upx;
		display: flex;
		flex-direction: row;
		height: 90upx;
		line-height: 90upx;
		font-size: 28upx;
		color: #333333;
		align-items: center;
		border-bottom: solid 2upx #E9E9E9;
	}

	.order-content .label image {
		height: 40upx;
		width: 30upx;
		margin-right: 20upx;
	}

	.order-content .content {
		display: flex;
		flex-direction: column;
		padding: 0 40upx;
		border-bottom: solid 2upx #E9E9E9;
	}

	.order-content .content .item {
		display: flex;
		flex-direction: row;
		height: 80upx;
		line-height: 80upx;
		color: #757575;
		font-size: 28upx;
	}

	.order-content .more {
		display: flex;
		flex-direction: row;
		height: 90upx;
		line-height: 90upx;
		font-size: 28upx;
		color: #bc8aa7;
		align-items: center;
		justify-content: center;
		border-bottom: solid 2upx #E9E9E9;
	}

	.review-line {

		display: flex;
		flex-direction: row;
		height: 88upx;
		background-color: #FFFFFF;
		color: #333333;
		font-size: 28upx;
		line-height: 88upx;
		padding: 0 40upx;
		align-items: center;
	}

	.review-line input {
		flex: 1;
		text-align: right;
	}

	.btn-content {
		width: 100%;
		flex: 1;
		background-color: #F1F1F1;
	}

	.btn {
		width: 360upx;
		height: 80upx;
		background-color: #ba7099;
		color: #FFFFFF;
		font-size: 32upx;
		margin: 60upx auto;

	}

	.btn:after {
		border: 0;
	}
</style>
